<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script>
        window.onload = function(){
            var app4 = new Vue({
                el:'#app-4',
                data:{
                    username:'',
                    age:0,
                    message:'Hello Vue.js!',
                    peoples:[
                        { name:'yy',  age:20,time:new Date() },
                        { name:'zjf', age:21,time:new Date() },
                    ]
                },
                methods:{
                    reverseMessage: function() {
                      this.message = this.message.split().join('')
                    },
                    addpeople:function(){
                     this.peoples.push({name:this.username, age:this.age,time:new Date()});
                 },
                    removeall:function(){
                        this.peoples = []
                    },
                    remove:function(index){
                        this.peoples.splice(index,1);
                    },
                    filters:{
                        hhmmss:function(x){
                            return(x.getHours()+":"+ x.getMinutes()+":"+ x.getSeconds())
                        }
                    }
                }
            })
        }
    </script>
</head>
<body>
<div id="app-4">
    <p>{{message}}</p>
    姓名：<input v-model="username"><br>
    年龄：<input v-model="age"><br>
    <table border="1">
        <button v-on:click="addpeople">添加</button>
        <button v-on:click="removeall">清空</button>

        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>添加时间</th>
            <th>操作</th>
        </tr>
        <tr v-for = "(people,index) in peoples">
            <td>{{ index+1 }}</td>
            <td>{{ people.name }}</td>
            <td>{{ people.age }}</td>
            <td>{{ people.time|hhmmss }}</td>
            <!--<td>{{people.time.getHours()+':'+people.time.getMinutes()+':'+people.time.getSeconds()}}</td>-->
            <td><button v-on:click="remove(index)">删除</button></td>
        </tr>

    </table>
</div>
</body>
</html>